<template>
	<view class="content">
			<view class="pageHeader">
				商务
			</view>
			<view style="padding-top: 84px;height:calc(100% - 84px)">
				<view class="vertibox flex aic jsb bg-white">
					<view v-for="(item,index) in vertiList" @click="tabClick(index,item)" :key="index" class="vertitem" :class="[item.power&&index==topindex?'active':(!item.power?'none':'noactive')]">
						{{item.name}}
					</view>
				</view>
				<swiper :current="topindex" class="swiper-box" duration="300" @change="changeTab">
					<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in vertiList" :key="tabIndex">
						<view>
							<view v-if="tabItem.goods.title==undefined&&tabItem.power" class="bg-white">
								<view class="txtcenter" >
									<view>你还没有选择展业商品，请先完成：</view>
									<view class="showset" @click="setgoods(1,tabIndex)">展示设置</view>
								</view>
							</view>
							<view v-if="tabItem.goods.title==undefined&&!tabItem.power" class="bg-white">
								<view class="txtcenter" >
									<view>你还不是{{tabItem.name}}</view>
									<view class="showset" @click="setgoods(2)">去申请</view>
								</view>
							</view>
							<view v-if="tabItem.goods.title!==undefined&&tabItem.power">
								<view class="bg-white" style="padding:0 30upx;margin-bottom: 20upx;">
									<view class="showgood">
										<view class="showgooditem agentgood">代理商品：<text class="interColor">{{tabItem.goods.title}}</text></view>
										<view class="showgooditem btngood">代理区域：<text class="interColor">{{tabItem.area}}</text></view>
										<view class="gotihuo" @click="tigood()">去提货</view>
									</view>
									<view class="achievementBox">
										<view class="achievementitem flex aic jsb ">
											<view class="flex aic">
												<tetx>我的提货</tetx>
												<text class="achievement">￥{{tabItem.vertimsg.delivery_performance}}</text>
											</view>
											<view class="flex aic">
												<tetx>区域业绩</tetx>
												<text class="achievement">￥{{tabItem.vertimsg.regional_performance}}</text>
											</view>
										</view>
										<view class="middleachievement flex aic jsb ">
											<text>月度加权</text>
											<view style="text-align: center;">
												<tetx class="jiaquan">经销商加权</tetx>
												<view class="jiachievement">￥{{tabItem.vertimsg.distribution}}</view>
											</view>
											<view style="text-align: center;">
												<tetx class="jiaquan">代理商加权</tetx>
												<view class="jiachievement">￥{{tabItem.vertimsg.agent}}</view>
											</view>
											<view style="text-align: center;">
												<tetx class="jiaquan">合伙人加权</tetx>
												<view class="jiachievement">￥{{tabItem.vertimsg.partner}}</view>
											</view>
										</view>
										<view class="achievementitem flex aic jsb ">
											<view class="flex aic">
												<tetx>我的分红</tetx>
												<text class="achievement">￥{{tabItem.vertimsg.weighted_dividend}}</text>
											</view>
											<view class="flex aic">
												<tetx>我的佣金</tetx>
												<text class="achievement">￥{{tabItem.vertimsg.commission}}</text>
											</view>
										</view>
										
									</view>
									<view class="flex aic powerorder">
										<view>权限订单</view>
										<view class="devidebox">
											<text @click="powerClick(dindex)" v-for="(ditem,dindex) in tabItem.devideList" :key="dindex" class="deitem"  :class="{current: currentindex === dindex}">
												{{ditem.name}}
											</text>
										</view>
									</view>
								</view>
								<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getPanicBuying('page')">
									<view v-if="tabItem.devideList[currentindex].loaded=== true && tabItem.devideList[currentindex].areaOrder.length === 0" class="empty">
										<image src="/static/empty.png" mode="widthFix"></image>
										<view class="empty-tips">
											暂无数据~
										</view>
									</view>
									<view  v-for="(sitem,sindex) in tabItem.devideList[currentindex].areaOrder" :key="sindex"  style="font-size: 28upx;margin-bottom:20upx;background-color: #fff;padding: 26upx 30upx;">
										<view style="display: flex;align-items: center;position: relative;padding-top: 10upx;">
											<image :src="sitem.items[0].images" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
											<view style="display: flex;flex-direction: column;justify-content: space-between;width:480upx;font-size: 28upx;color: #333;">
												<view class="goodtitle">
													{{sitem.items[0].title}}
												</view>
												<view style="font-size: 28upx;font-weight: 500;margin-top:16upx;">
													订单编号: {{sitem.order_no}}
												</view>
												<view style="color: #999;font-size:24upx;margin-top:16upx;">
													{{currentindex==0?'提货':'创建'}}时间：{{sitem.add_time}}
												</view>
											</view>
										</view>
									</view>
									<uni-load-more :status="tabItem.loadingType"></uni-load-more>
								</scroll-view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
	</view>
</template>

<script>
	import postAjax from '../../API/postAjax.js'
	import {
	        mapState,  
	        mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				vertiList:[{name:'经销商',vertimsg:{},power:null,area:'',goods:{},devideList:[{name:'提货订单',loadingType: 'more',areaOrder:[]},{name:'区域订单',loadingType: 'more',areaOrder:[]}]},
				{name:'代理商',vertimsg:{},addstr:'',power:null,goods:{},area:'',devideList:[{name:'提货订单',loadingType: 'more',areaOrder:[]},{name:'区域订单',loadingType: 'more',areaOrder:[]}]},
				{name:'合伙人',vertimsg:{},addstr:'',power:null,goods:{},area:'',devideList:[{name:'提货订单',loadingType: 'more',areaOrder:[]},{name:'区域订单',loadingType: 'more',areaOrder:[]}]}],
				currentindex:0,
				topindex:0,
				myinfo:{},//个人信息
				pageindex:0,
				mytoken:'',
				state:6,// 接口的状态
				// 省市区代理的信息
				arealist:[
					{
						province:'',
						city:'',
						area:'',
					},
					{
						province:'',
						city:'',
						area:'',
					},
					{
						province:'',
						city:'',
						area:'',
					}
				]
			}
		},
		async onShow(){
			let that = this
			that.mytoken = uni.getStorageSync('token')
			that.getUserInfo()
			that.getPanicBuying()
		},
		methods: {
			...mapMutations(['users']),
			// 获取个人信息
			async getUserInfo(){
				let that = this
				let oinfo = await that.getinfo()
				that.users(oinfo)
				that.myinfo = oinfo.user
				// "distribution": "agent":"partner": 经销商 代理商 合伙人
				that.vertiList[0].power = that.myinfo.distribution == '1'
				that.vertiList[1].power = that.myinfo.agent == '1'
				that.vertiList[2].power = that.myinfo.partner == '1'
				let disverti=[],agentverti=[],partverti=[]
				if(that.vertiList[0].power){
					disverti = await that.get_verti_good(1)
					that.vertiList[0].goods=disverti.goods
					that.vertiList[0].vertimsg=disverti
					that.vertiList[0].area=disverti.province_name+disverti.city_name+disverti.area_name
					that.arealist[0].province = disverti.province
					that.arealist[0].city = disverti.city
					that.arealist[0].area = disverti.area
				}
				if(that.vertiList[1].power){
					agentverti = await that.get_verti_good(2)
					that.vertiList[1].vertimsg=agentverti
					that.vertiList[1].goods=agentverti.goods
					that.vertiList[1].area=agentverti.province_name+agentverti.city_name
					that.arealist[1].province = agentverti.province
					that.arealist[1].city = agentverti.city
				}
				if(that.vertiList[2].power){
					partverti = await that.get_verti_good(3)
					that.vertiList[2].vertimsg=partverti
					that.vertiList[2].goods=partverti.goods
					that.vertiList[2].area=partverti.province_name
					that.arealist[2].province = partverti.province
				}
			},
			// 获取个人信息
			getinfo(){
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('user/Center', {
						token:that.mytoken
					}, function(data) {
						resolve(data.data)
					});
				});
			},
			// 获取个人信息 各个身份的代理商品信息
			get_verti_good(verti) {
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('Promotebusiness/promotebusinessrecord', {
						token:that.mytoken,
						exhibition_level_id: verti,
						m:0,
						n:8
					}, function(data) {
						resolve(data.data[0])
					});
				});
			},
			// 获取提货订单和区域订单
			
			tabClick(index,item) {
				this.topindex = index
				if(!item.power){
					uni.navigateTo({
						url:'../business/index'
					})
				}
			},
			//去提货
			tigood(i){
				uni.navigateTo({
					url:'../business/index'
				})
			},
			//设置展示商品
			setgoods(type,ind){
				let linkurl = type==1?'../business/showset?state='+ind:'../business/index'
				uni.navigateTo({
					url:linkurl
				})
			},
			powerClick(ind){
				this.currentindex = ind
				this.getPanicBuying('tabChange');
			},
			changeTab(e) {
				this.topindex = e.target.current;
				if(this.currentindex==0){
					this.state= this.topindex==0?6:(this.topindex==1?8:10)
				}else{
					this.state= this.topindex==0?1:(this.topindex==1?2:3)
				}
			},
			//获取订单列表
			getPanicBuying(source) {
				let that = this
				let index = that.topindex;
				let btmindex = that.currentindex
				let navItem = that.vertiList[index].devideList[that.currentindex]
				let goodid =  that.vertiList[index].goods.id
				// let state = navItem.state;
				let postdata = {}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					that.pageindex = navItem.loadindex
					// that.pageindex=1
					return;
				}
				
				if (source === 'tabChange' && navItem.loaded !== true) {
					that.pageindex = 0
				}
				
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (source === 'page') {
					// that.pageindex++
				}
				navItem.loadingType = 'loading';
				
				let linkurl = that.currentindex==0?'Promotebusiness/mypickup':'Promotebusiness/regionalorder'
				if(that.currentindex == 0){
					postdata = {
						token:that.mytoken,
						order_type:that.state,
						m:that.pageindex,
						n:4
					}
				}else{
					postdata = {
						token:that.mytoken,
						goods_id:goodid,
						exhibition_level_id:that.state,
						m:that.pageindex,
						province:that.arealist[index].province,
						city:that.arealist[index].city,
						area:that.arealist[index].area,
						n:4
					}
				}
				
				console.log(postdata)
				// return
				// 列表
				let myorderList = []
				
				postAjax(linkurl,postdata,function(data){
					if(data.code == 0) {
						myorderList = data.data
						if (myorderList.length > 0) {
							myorderList.forEach(item => {
								navItem.areaOrder.push(item);
							})
							if (navItem.areaOrder.length > 4) {
								navItem.loadingType = 'more';
						
							} else {
								navItem.loadingType = 'nodata';
								// that.pageindex--
							}
							that.pageindex++
							that.$set(navItem, 'loadindex', that.pageindex);
						}else {
							navItem.loadingType = 'noMore';
						}
						if(navItem.areaOrder.length==0){
							navItem.loadingType = 'nodata';
						}
						that.$set(navItem, 'loaded', true);
					}
				})
			},
		}
	}
</script>

<style>
	page,
	.content{height: 100vh;background-color: #f8f8f8;}
	.txtcenter{text-align: center;font-size: 28upx;color: #666;padding-bottom: 28upx;}
	.pageHeader {
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 20px;
	}
	.vertibox{padding: 20px 30upx;height:40px;}
	.vertitem{padding:14upx 60upx;font-size: 28upx;border-radius: 6upx;}
	.none{background-color: #fff;border:2upx solid #999999;color: #999;}
	.noactive{background-color: #fff;color: #666;border:2upx solid #9DCCFB;}
	.active{background-color:#1D84E8;color: #fff;border:2upx solid #1D84E8;}
	.bg-white{background-color: #fff;}
	.showgood{position: relative;color: #666;font-size: 28upx;}
	.showgooditem{padding-bottom: 24upx;overflow: hidden;display:block;
		white-space: nowrap;
		text-overflow: ellipsis;}
	.btngood{max-width: 96%;margin-top: 16upx;}
	.agentgood{max-width:70%;}
	.interColor{color: #333;}
	.gotihuo{width: 124upx;height: 62upx;text-align: center;line-height: 62upx;background-color: #EC6104;color: #fff;border-radius: 6upx;position: absolute;right: 30upx;top:10upx}
	.showset{width: 168upx;height: 60upx;line-height: 60upx;background-color: #FF4242;color: #fff;border-radius: 6upx;margin:70upx auto 0;}
	.achievementBox{border-top:2upx solid #eee;border-bottom:2upx solid #eee;padding:30upx 0;font-size: 28upx;}
	.btm{margin-top: 32upx;}
	.achievement{background-color: #E2F1FF;border-radius: 6upx;font-size: 26upx;width: 190upx;text-align: center;padding: 12upx 0;margin-left: 16upx;}
	.powerorder{font-size: 28upx;}
	.devidebox{;margin-left: 40upx;padding: 30upx 0 }
	.deitem{margin-left: 70upx;color: #999;padding: 30upx 0 }
	.deitem.current{color: #EC6104;position: relative;}
	.jiaquan{font-size: 24upx;color: #666;}
	.jiachievement{
		background-color: #E2F1FF;border-radius: 6upx;font-size: 26upx;width: 160upx;text-align: center;padding: 12upx 0;margin-top:10upx;
	}
	.deitem.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 114upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}
	.middleachievement{margin: 34upx 0;}
	.goodtitle {
		
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
	}
	.swiper-box {
		min-height: calc(100% - 164px);
	}
	.list-scroll-content {
		height: 820upx;
	}
	.uni-swiper-item {
		height: auto;
	}
	.empty {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: transparent;
		margin-top: 30upx;
		position: relative;
		z-index: 999999999;
	
	}
	
	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}
	
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
</style>
